<!--
 * @Descripttion: 用于特色产业带的商品展示
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-15 23:51:18
 * @LastEditors: lyw
 * @LastEditTime: 2022-02-24 16:17:53
-->
<template>
  <div class="goodsshow">
    <div class="main">
      <el-container>
        <div
          style="
            border: 1px #000000 solid;
            margin-left: 10px;
            width: 170px;
            margin-top: 10px;
          "
        >
          <img
            src="../assets/apple.jpeg"
            height="150px"
            style="margin-left: 10px"
          />
          <div style="margin-left: 20px">商品名称</div>
          <div style="margin-left: 20px">价格 批发量</div>
          <div style="margin-left: 20px">供应企业</div>
        </div>
        <div
          style="
            border: 1px #000000 solid;
            margin-left: 10px;
            width: 170px;
            margin-top: 10px;
          "
        >
          <img
            src="../assets/banana.jpeg"
            height="150px"
            style="margin-left: 10px"
          />
          <div style="margin-left: 20px">商品名称</div>
          <div style="margin-left: 20px">价格 批发量</div>
          <div style="margin-left: 20px">供应企业</div>
        </div>
      </el-container>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="500"
          style="margin-left: 200px; margin-top: 50px"
        >
        </el-pagination>
      </div>
      <!-- 分页END -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  }
};
</script>

<style scoped>
.goodsshow {
    background: #f0eded;
    height: 400px;
    margin-top: 20px;
}
</style>